<template>
  <el-form
       ref="configsForm"
       :rules="configsRule"
       label-width="150px"
       :model="form" class="demo-form-inline">
    <el-card class="box-card" style="margin-bottom: 20px;" v-if="false">
      <div slot="header">
        <span>转账限额</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div>向中心钱包转账限额</div>
          <el-form-item label="每日可转账次数" prop="inTimes">
            <el-col :span="16">
              <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入次数" v-model.number="form.inTimes">
                <template slot="append">次</template>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="每次可转账金额">
          </el-form-item>
          <el-form-item label="最低" prop="inMin">
            <el-col :span="16">
              <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入金额" v-model.number="form.inMin">
                <template slot="append">元</template>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="最高" prop="inMax">
            <el-col :span="16">
              <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入金额" v-model.number="form.inMax">
                <template slot="append">元</template>
              </el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <div>向游戏钱包转账限额</div>
          <el-form-item label="每日可转账次数" prop="outTimes">
            <el-col :span="16">
              <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入次数" v-model.number="form.outTimes">
                <template slot="append">次</template>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="每次可转账金额">
          </el-form-item>
          <el-form-item label="最低" prop="outMin">
            <el-col :span="16">
              <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入金额" v-model.number="form.outMin">
                <template slot="append">元</template>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="最高" prop="outMax">
            <el-col :span="16">
              <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入金额" v-model.number="form.outMax">
                <template slot="append">元</template>
              </el-input>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header">
        <span>转账开关</span>
      </div>
      <el-row>
        <el-col :span="8" >
          <el-form-item
            :key="item.value"
            v-if="item.value !== 0"
            :label="item.title" v-for="(item,index) in consts.TRANSFER_PLATFORMS">
            <el-radio-group v-model="form.transfer[item.value]" size="medium">
              <el-radio-button :label="true">开启</el-radio-button>
              <el-radio-button :label="false">关闭</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <div style="padding: 20px 0 20px 150px">
      <el-button class="filter-item" type="primary" icon="el-icon-printer"
                 @click="doSave({action: 'saveForm', form: 'configsForm'})">生成配置
      </el-button>
      <el-button class="filter-item"
                 @click="resetForm('configsForm')">重置
      </el-button>
    </div>
  </el-form>
</template>

<script>
  import {form, factory} from '@/build'
  import {getTransferConfigs,setTransferConfigs} from '@/services/api/transfer'

  export default {
    name: "transfer-configs",
    mixins: [form, factory],
    data() {
      return {
        form: {
          transfer: [],
          inMin: 0,
          inMax: 0,
          inTimes: 0,
          outMin: 0,
          outMax: 0,
          outTimes: 0,
        },
        configsRule:{
          inTimes:factory.getRule('times'),
          inMin:factory.getRule('money'),
          inMax:factory.getRule('money'),
          outTimes:factory.getRule('times'),
          outMin:factory.getRule('money'),
          outMax:factory.getRule('money'),
        }
      }
    },

    computed:{
      transferOpen(){
        const arr = [];
        _.map(this.form.transfer,(item,channelId)=>{
          if(!_.isUndefined(item)){
            arr.push({channelId:channelId, open: item})
          }
        });

        return arr
      }
    },
    mounted() {
      this.bindSave(setTransferConfigs, 'saveForm', 'form', {
        beforeSend: data=>{
          data.transferOpen = this.transferOpen
          return data
        }
      });
      this.bindGet(getTransferConfigs, 'form',{
        format: data=>{
          const {transferOpen} = data
          const transferArr = []
          _.map(transferOpen,(item)=>{
            transferArr[item.channelId] = item.open
          });
          data.transfer= transferArr
          delete  data.transferOpen
          return {...this.form,...data}
        }
      });
      this.getAll();
    },
  }
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
